@use "../variables.scss" as *;
@use "../mixins.scss" as mixins;

.sv-ranking {
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.sv-ranking-item {
  cursor: pointer;
  position: relative;
  opacity: 1;
}

.sv-ranking-item:focus .sv-ranking-item__icon--hover {
  visibility: hidden;
}

.sv-ranking-item:hover:not(:focus) .sv-ranking-item__icon--hover {
  visibility: visible;
}

.sv-question--disabled .sv-ranking-item:hover .sv-ranking-item__icon--hover {
  visibility: hidden;
}

.sv-ranking-item:focus {
  outline: none;
}

.sv-ranking-item:focus .sv-ranking-item__icon--focus {
  visibility: visible;
  top: calcSize(0.6);
  height: calcSize(3);
}

.sv-ranking-item:focus .sv-ranking-item__index {
  background: $background;
  outline: calcSize(0.25) solid $primary;
}

.sv-ranking-item__content.sv-ranking-item__content {
  display: flex;
  align-items: center;
  line-height: 1em;
  padding: calcSize(0.5) 0px;
  border-radius: calcSize(12.5);
}

.sv-ranking-item__icon-container {
  position: relative;
  left: 0;
  bottom: 0;
  flex-shrink: 0;
  width: calcSize(3);
  height: calcSize(3);
  align-self: flex-start;
  padding-left: calcSize(1);
  padding-right: calcSize(1);
  margin-left: calcSize(-2);
  box-sizing: content-box;
}

.sv-ranking-item--disabled.sv-ranking-item--disabled,
.sv-ranking-item--readonly.sv-ranking-item--readonly,
.sv-ranking-item--preview.sv-ranking-item--preview {
  cursor: initial;
  user-select: initial;
  -webkit-user-select: initial;

  .sv-ranking-item__icon-container.sv-ranking-item__icon-container {
    .sv-ranking-item__icon.sv-ranking-item__icon {
      visibility: hidden;
    }
  }
}

.sv-ranking-item__icon.sv-ranking-item__icon {
  visibility: hidden;
  fill: $primary;
  position: absolute;
  top: calcSize(1);
  width: calcSize(3);
  height: calcSize(3);
}

.sv-ranking-item__index.sv-ranking-item__index {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-color: $primary-light;
  color: $font-questiontitle-color;
  font-size: $font-editorfont-size;
  border-radius: 100%;
  border: calcSize(0.25) solid transparent;
  width: calcSize(5);
  height: calcSize(5);
  line-height: calcLineHeight(1.5);
  box-sizing: border-box;
  font-weight: 600;
  margin-left: calcSize(0);
  transition:
    outline $transition-duration,
    background $transition-duration;
  outline: calcSize(0.25) solid transparent;
  align-self: self-start;

  svg {
    fill: $font-questiontitle-color;
    width: $font-editorfont-size;
    height: $font-editorfont-size;
  }
}

.sv-ranking-item__text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: $font-questiontitle-color;
  font-size: $font-editorfont-size;
  line-height: multiply(1.5, $font-editorfont-size);
  margin: 0 calcSize(2);
  overflow-wrap: break-word;
  word-break: normal;
  align-self: self-start;
  padding-top: calcSize(1);
  padding-bottom: calcSize(1);

  .sv-string-viewer,
  .sv-string-editor {
    overflow: initial;
    white-space: pre-line;
  }
}

.sd-ranking--disabled .sv-ranking-item__text {
  color: $font-questiontitle-color;
  opacity: 0.25;
}

.sv-ranking-item--disabled .sv-ranking-item__text {
  color: $font-questiondescription-color;
  opacity: 0.25;
}

.sv-ranking-item--readonly {
  .sv-ranking-item__index {
    background-color: $background-dark;
  }
}

.sv-ranking-item--preview {
  .sv-ranking-item__index {
    background-color: transparent;
    border: 1px solid $foreground;
    box-sizing: border-box;
  }
}

.sv-ranking-item__ghost.sv-ranking-item__ghost {
  display: none;
  background-color: $background-dim;
  border-radius: calcSize(12.5);
  width: calcSize(31);
  height: calcSize(5);
  z-index: 1;
  position: absolute;
  left: 0;
  top: calcSize(0.5);
}

[dir="rtl"] .sv-ranking-item__ghost {
  left: initilal;
  right: calcSize(5);
}

.sv-ranking-item--ghost {
  height: calcSize(6);

  .sv-ranking-item__text .sv-string-viewer,
  .sv-ranking-item__text .sv-string-editor {
    white-space: unset;
  }
}

.sv-ranking-item--ghost .sv-ranking-item__ghost {
  display: block;
}

.sv-ranking-item--ghost .sv-ranking-item__content {
  visibility: hidden;
}

.sv-ranking-item--drag .sv-ranking-item__content {
  box-shadow: $shadow-large;
  border-radius: calcSize(12.5);
}

.sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
  visibility: hidden;
}

.sv-ranking-item--drag .sv-ranking-item__icon--hover {
  visibility: visible;
}

.sv-ranking--mobile .sv-ranking-item__icon--hover {
  visibility: visible;
  fill: $foreground-light;
}

.sv-ranking--mobile.sv-ranking--drag .sv-ranking-item--ghost .sv-ranking-item__icon.sv-ranking-item__icon--hover {
  visibility: hidden;
}

.sv-ranking--mobile.sv-ranking-shortcut {
  max-width: 80%;
}

.sv-ranking--mobile {
  .sv-ranking-item__index.sv-ranking-item__index {
    margin-left: 0;
  }

  .sd-element--with-frame .sv-ranking-item__icon {
    margin-left: 0;
  }
}

.sv-ranking--design-mode .sv-ranking-item:hover .sv-ranking-item__icon {
  visibility: hidden;
}

.sv-ranking--disabled {
  opacity: 0.8;
}

.sv-ranking-shortcut[hidden] {
  display: none;
}

.sv-ranking-shortcut .sv-ranking-item__icon {
  fill: $primary;
}

.sv-ranking-shortcut .sv-ranking-item__text {
  margin-right: calcSize(4);
}

.sv-ranking-shortcut .sv-ranking-item__icon--hover {
  visibility: visible;
}

.sv-ranking-shortcut .sv-ranking-item__icon {
  width: calcSize(3);
  height: calcSize(3);
  top: calcSize(1);
}

.sv-ranking-shortcut {
  .sv-ranking-item__content {
    padding-left: calcSize(0.5);
  }

  .sv-ranking-item__icon-container {
    margin-left: calcSize(0);
  }
}

.sv-ranking-shortcut {
  cursor: grabbing;
  position: absolute;
  z-index: 10000;
  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
  min-width: 100px;
  max-width: 400px;
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));

  .sv-ranking-item {
    height: calcSize(6);

    .sv-ranking-item__text {

      .sv-string-viewer,
      .sv-string-editor {
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}

.sv-ranking--select-to-rank {
  display: flex;
}

.sv-ranking--select-to-rank-vertical {
  flex-direction: column-reverse;

  .sv-ranking__containers-divider {
    margin: calcSize(3) 0;
    height: 1px;
  }

  .sv-ranking__container--empty {
    padding-top: calcSize(1);
    padding-bottom: calcSize(1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.sv-ranking-item--animate-item-removing {
  animation-name: moveIn, fadeIn;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: $ranking-move-out-duration, $ranking-fade-out-duration;
  animation-delay: $ranking-move-out-delay, 0s;
}

.sv-ranking-item--animate-item-adding {
  animation-name: moveIn, fadeIn;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: $ranking-move-in-duration, $ranking-fade-in-duration;
  animation-delay: 0s, $ranking-fade-in-delay;
}


.sv-ranking-item--animate-item-adding-empty {
  animation-name: fadeIn;
  opacity: 0;
  animation-timing-function: linear;
  animation-duration: $ranking-fade-in-duration;
  animation-delay: 0;
}

.sv-ranking-item--animate-item-removing-empty {
  animation-name: fadeIn;
  animation-direction: reverse;
  animation-timing-function: linear;
  animation-duration: $ranking-fade-out-duration;
  animation-delay: 0;
}

@keyframes sv-animate-item-opacity-reverse-keyframes {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes sv-animate-item-opacity-keyframes {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.sv-ranking--select-to-rank-horizontal {
  .sv-ranking__container {
    max-width: calc(50% - 1px);
  }

  .sv-ranking__containers-divider {
    width: 1px;
  }

  .sv-ranking__container--to {
    .sv-ranking-item {
      left: calcSize(2);
    }
  }

  .sv-ranking__container--empty {
    &.sv-ranking__container--to {
      //padding-right: calcSize(3);

      .sv-ranking-item {
        left: initial;
      }

      .sv-ranking__container-placeholder {
        padding-left: calcSize(5);
      }
    }

    &.sv-ranking__container--from {
      //padding-left: calcSize(3);

      .sv-ranking__container-placeholder {
        padding-right: calcSize(5);
      }
    }
  }
}

.sv-ranking__container-placeholder {
  color: var(--sjs-font-questiondescription-color, #{$foreground-dim-light});
  @include mixins.defaultFont;
  white-space: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  //width: 100%;
  height: 100%;
  padding-top: calcSize(0.5);
  padding-bottom: calcSize(0.5);
  box-sizing: border-box;
}

.sv-ranking__container {
  flex: 1;
  //max-width: 100%;
}

.sv-ranking__container--empty {
  //padding: calcSize(8);
  box-sizing: border-box;
  text-align: center;
}

.sv-ranking__containers-divider {
  background: var(--sjs-border-default, #{$border-inside});
}

.sv-ranking__container--from {
  .sv-ranking-item__icon--focus {
    display: none;
  }
}

.sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
  left: 0 !important;
  padding-left: 16px;

  .sv-ranking-item__ghost {
    left: initial;
  }
}

.sv-ranking--select-to-rank-swap-areas {
  flex-direction: row-reverse;

  .sv-ranking__container--to {
    .sv-ranking-item {
      padding-left: 0;
      left: -24px !important;
    }
  }

  .sv-ranking__container--from {
    .sv-ranking-item {
      padding-left: calcSize(2);
      left: 0;
    }

    .sv-ranking-item__ghost.sv-ranking-item__ghost {
      left: calcSize(2);
    }
  }

  .sv-ranking__container--empty {
    &.sv-ranking__container--to {
      .sv-ranking__container-placeholder {
        padding-right: calcSize(5);
        padding-left: 0;
      }

      .sv-ranking-item__ghost.sv-ranking-item__ghost {
        right: calcSize(2);
      }
    }

    &.sv-ranking__container--from {
      .sv-ranking__container-placeholder {
        padding-left: calcSize(5);
        padding-right: 0;
      }
    }
  }
}

.sd-question--mobile,
.sd-root-modern.sd-root-modern--mobile {
  .sv-ranking-item__icon-container {
    margin-left: calcSize(-2);
    display: flex;
    justify-content: flex-end;
    padding: 0;
    width: calcSize(5);
  }
}